<template>
  <div style="padding:0px 8px">

    <el-card class="configContainer">
      <div style="display: flex;flex-direction: row;align-items: center">
        <h4 class="card-title"> 班级管理 </h4>
        <div class="space"/>
        <el-button type="primary" @click="showAdd">新增班级</el-button>
      </div>
      <el-divider/>
      <div style="margin: 8px">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="年级">
            <el-select v-model="searchForm.grade" placeholder="选择年级">
              <el-option label="七年级" :value="1"/>
              <el-option label="八年级" :value="2"/>
              <el-option label="九年级" :value="3"/>
            </el-select>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="searchForm.className" clearable placeholder="选择班级进行检索"/>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :icon="Search" @click="search">
              <el-icon>
                <Search/>
              </el-icon>
              搜索
            </el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="flex: 1;">

      </div>

      <el-table height="400px" :data="classList" style="width: 100%;margin-top: 16px;"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="标识" width="120">
        </el-table-column>
        <el-table-column prop="className" label="班级名">
        </el-table-column>


        <el-table-column prop="grade" label="年级">
          <template #default="scope">
            {{ scope.row.grade }}
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="入学年份">
          <template #default="scope">
            {{ scope.row.grade }}
          </template>
        </el-table-column>
        <el-table-column prop="createBy" label="创建人">
          <template #default="scope">
            {{ scope.row.createBy }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template #default="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="showEdit(scope.row)">
              <el-icon>
                <Edit/>
              </el-icon>
              编辑
            </el-button>
            <el-popconfirm title="确认删除吗?" @confirm="del(scope.row.id)">
              <template #reference>
                <el-button link type="danger" size="small">
                  <el-icon>
                    <Delete/>
                  </el-icon>
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :page-count="pagecount"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="currentChange"
          style="margin-top: 16px;width: 100%;display: flex;align-items: center;justify-content: center;"
          background layout="total, sizes, prev, pager, next, jumper"/>
    </el-card>
  </div>


  <el-dialog v-model="show" width="30%" title="新增班级" :before-close="handleClose" center>
    <el-form ref="add" :model="addForm" label-width="80px" :rules="rules">
      <el-form-item label="班级名" prop="className">
        <el-input v-model="addForm.className" show-word-limit maxlength="10"/>
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-select style="width:100%" v-model="addForm.grade" placeholder="选择年级">
          <el-option label="七年级" :value="1"/>
          <el-option label="八年级" :value="2"/>
          <el-option label="九年级" :value="3"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="show = false">取消</el-button>
      <el-button type="primary" @click="add()">确定</el-button>
    </template>
  </el-dialog>
  <el-dialog v-model="show_edit" width="30%" title="修改班级" :before-close="handleClose" center>
    <el-form ref="edit" :model="editForm" :rules="rules" label-width="80px">
      <el-form-item label="班级名" prop="className">
        <el-input v-model="editForm.className" show-word-limit maxlength="10"/>
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-select style="width:100%" v-model="editForm.grade" disabled placeholder="选择年级">
          <el-option label="七年级" :value="1"/>
          <el-option label="八年级" :value="2"/>
          <el-option label="九年级" :value="3"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="show_edit = false">取消</el-button>
      <el-button type="primary" @click="edit()">确定</el-button>
    </template>
  </el-dialog>

  <CompanyText/>
</template>


<script>
import CompanyText from "../../../components/CompanyText.vue";

export default {
  name: 'IndexPage',
  props: {
    // msg: String
  },
  components: {
    CompanyText
  },
  data() {
    return {
      rules: {
        grade: [{required: true, message: "年级必选", tirgger: 'change', type: 'number'},],
        className: [{required: true, message: "班级必填", tirgger: blur},]
      },
      addForm: {},
      editForm: {},
      total: 0,
      searchForm: {
        className: null,
        grade: null,
        current: null,
        size: 10,
      },
      classList: [],
      pagesize: 10,
      pagecount: 0,
      multipleSelection: [],
      show: false,
      show_edit: false,

    }
  },
  mounted() {
  },
  created() {
    this.load();
  },
  methods: {
    showAdd() {
      this.show = true;
    },
    showEdit(item) {
      this.show_edit = true;
      this.editForm = {...item}
    },
    search() {
      this.load()
    },
    reset() {
      this.searchForm = {};
      this.load()
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    updateClass() {
      this.$http.post("/class/updateClass", this.form)
          .then(res => {
            this.show_edit = false
            this.load();
          })
          .catch(err => {
            console.log(err)
          })
    },
    add() {
      let that = this;
      this.$refs.add.validate((valid, fields) =>{
        if(valid){
          this.$http.post('/class/addClass', that.addForm).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              that.$message.success(response.userMsg)
              that.show = false;
              that.load()
              that.$refs.add.resetField();
            }
          }).catch(function (error) {
            console.log('error');
          });
        }
      })

    },
    del(id) {
      let that = this;
      this.$http.post('/class/deleteClass', {
        "id": id,
      }).then(function (response) {
        console.log('success' + response.data);
        if (response.code === 0) {
          that.$message.success(response.userMsg)
          that.load()
        }
      }).catch(function (error) {
        console.log('error');
      });
    },
    edit() {
      let that = this;
      this.$refs.edit.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/class/updateClass', that.editForm).then(function (response) {
            console.log('success' + response.data);
            if (response.code === 0) {
              that.$message.success(response.userMsg)
              that.show_edit = false;
              that.load()
              that.$refs.edit.resetField();
              that.editForm = {}
            }
          }).catch(function (error) {
            console.log('error');
          });
        }})
    },
    load() {
      let that = this;
      this.$http.post('/class/page', that.searchForm).then(function (response) {
        console.log('success' + response);
        that.classList = response.data.records;
        that.pagecount = response.data.pages;
        that.total = response.data.total;
        that.current = response.data.current;
      }).catch(function (error) {
        console.log('error');
      });
    },
    currentChange(current) {
      this.searchForm.current = current;
      this.load();
    },
    handleSizeChange(size) {
      this.searchForm.size = size;
      console.info(this.searchForm.size)
      this.load();
    },

  }
}
</script>

<style scoped>
H3,
H4,
span,
p {
  text-align: left;
}

.text-center H4 {
  text-align: center;
}


.el-col {
  /* border-radius: 4px;
    background-color: rgb(74, 74, 74); */
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  padding: 8px;
}

.card-body {
  padding: 30px;
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  margin: 8px;
  justify-content: space-around;
}

.text-white {
  color: white;
}

.media .el-icon {
  color: white;
}

h3 {
  padding: 0;
  margin: 0;
}

.configContainer {
  margin: 10px 8px;
  padding: 0px;
  /* border: red 1px solid; */
}
</style>
